<script setup>
import { ref, reactive } from "vue";
import http from "../utils/api";
import { useRouter } from "vue-router";
import card from '../components/base/card.vue'
import {useUserStore} from '../stores/user'
import inputVue from '../components/base/input.vue'
import listView from '../components/base/list.vue'
import {searchNotesByInput} from '../utils/note'
import addmessage from '../hooks/message';

const router = useRouter();
let isInput = ref('')
const user = useUserStore()
let queryPage = reactive({
    total:0,
    page_size:3,
    page_num:1
})

let search = ref('')
let dataList = reactive([])

function getNotes(){
    http.post(`/api/getNotes`,{page_size:queryPage.page_size,page_num:queryPage.page_num}).then(
        res=>{
            res.data.data.forEach(item => {
                dataList.push(item)
            });
            queryPage.total = res.data.total
        },err=>{
            console.log(err.message);
        }
    )
}

function getNewNotes(){
    if(dataList.length>=queryPage.total){
        return
    }
    queryPage.page_num++
    getNotes()
}

function searchNotes(search){
    searchNotesByInput(search,queryPage.page_size,queryPage.page_num).then(
        res=>{
            if(res.code==0){
                    dataList.length=0
                    res.data.data.forEach(item => {
                    dataList.push(item)
                });
                queryPage.total = res.data.total
            }else{
                addmessage('查询失败')
                console.log(res.message);
            }
        }
    )
}

function publish(){
    // localStorage.removeItem('input');
    sessionStorage.removeItem('editText');
    router.push('/edit/0')
}

function getInput(){
    isInput.value = localStorage.getItem('input')
    if(isInput.value){
        addmessage('您有未发布的笔记，请及时发布')
        return
    }
}

getInput()
getNotes()
</script>

<template>
    <section class="body">
        <section class="top">
            <span class="text">随便写个啥</span>
        </section>

        <section class="content">
             <section class="left">
                <section class="tool">
                    <p id="nav">首页</p>
                    <p id="nav" @click="publish">发布</p>
                    <p id="nav">关于</p>
                </section>
            </section>

            <section class="right">
                <section style="text-align: center;">
                    <inputVue v-model="search" placeholder="search" @keyup.enter.native="searchNotes(search)">
                        <b class="icon-31sousuo"></b>
                    </inputVue>
                    <button @click.stop="searchNotes(search)" class="sousuo">搜索</button>
                    <button @click.stop="publish" class="publish">发布</button>
                </section>       

                <listView @toBottom="getNewNotes">
                    <template v-for="item in dataList" :key="item.id">
                        <card :title="item.title" :author="item.name" :time="item.time" :desc="item.desc" @click="router.push({path:'/show/'+item.id})"></card>
                    </template>
                    <div v-if="dataList.length>=queryPage.total" style="margin-top: 3vh;position:relative;left:50%;">没有了</div>
                 </listView>
            </section>
        </section>

       <!-- <pagination v-model="queryPage.page_num" :max-page="maxPage()"></pagination> -->

        <section class="bottom">
            <span style="font-size:50px">备案</span>
        </section>
    </section>
</template>

<style lang="less" scoped>
.body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    .top{
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap:wrap;
        height: 50vh;
        background-size:cover;
        background-image: url(../assets/1763915923.jpeg);
        .text{
                font-size: 30px;
                color: aliceblue;
                letter-spacing: 30px;
            }
    }
    .content{
        display: flex;
        align-content: center;
        justify-content: space-around;
        padding: 0 90px;
        @media screen and (min-width:900px) {
            .left{
                .tool{
                    position: sticky;
                    top: .5em;
                    margin-top: 4vh;
                    padding: 30px;
                    width: 20vw;
                    background-color: #fff;
                    border-radius: 20px;
                    margin-right: 2vw;
                    #nav{
                        font-size: 20px;
                        cursor: pointer;
                        margin: 20px 0;
                    }
                }
            }
            .right{
                .publish{
                    display: none;
                }
            }
        }
        @media not screen and (min-width:900px){
            .left{
                display: none;
            }
            .right{
                .publish{
                    margin-top: 1em;
                }
                .sousuo{
                    margin-top: 1em;
                }
            }
        }
    }

    .bottom{
        height: 40vh;
        background-color: blueviolet;
        margin-top: 5vh;
        
    }
}
</style>